<template>
	<view class="zg-area" :style="{'min-height': page_height + 'px','background-color': '#ffe6bd'}">
		<view class="area-1">
			<view class="a1t">
				<image :src="detail.customerAvatar" mode="aspectFill"></image>
				<text>{{detail.customerName || '--'}}</text>
			</view>
			<view class="">
				<image v-if="detail.status==9" style="width: 110rpx;height: 110rpx;position:fixed;left: 75%;top: 12%;" src="../static/kj_succ.png" mode=""></image>
				<image v-if="detail.status==10" style="width: 110rpx;height: 110rpx;position:fixed;left: 75%;top: 12%;" src="../static/kj_failed.png" mode=""></image>
			</view>
			<view class="a1m">
				<view class="a1m-l">
					<image :src="wwwImgUrl + detail.productPic" mode="aspectFill"></image>
				</view>
				<view class="alm-r flex-1 flex flex_column">
					<view class="almr-t">
						{{detail.productName  || '--'}}
					</view>
					<view class="almr-m">
						价值{{detail.kjPrice  || '--'}}元
					</view>
					<view class="almr-b">
						<text>{{detail.sales  || '--'}}人</text>
						<text>已砍价成功</text>
					</view>
				</view>
			</view>
			<view class="a1b">
				<view class="alb-process">
					<view class="albp-price">已砍<text>{{detail.kjChopped  || 0}}</text>元</view>
					<view class="albp-tag">
						<image src="/pagesShop/static/c1.png" mode="widthFix"></image>
						<view class="albp-tag-content">
							<view>还差<text>{{detail.kjNeed  || 0}}</text>元砍价</view>
							<view class="tp-mt10">砍价成功</view>
						</view>
					</view>
					<progress :percent="detail.kjChopped / detail.kjPrice * 100 || 0" :border-radius="7.5" :stroke-width="15" backgroundColor="#f5f5f5" activeColor="#ff473e" />
					<!-- <progress  :percent="50 / 100 * 100" :border-radius="7.5" :stroke-width="15" backgroundColor="#f5f5f5" activeColor="#ff473e" /> -->
				</view>
				<view class="alb-time" v-if=" detail.kjNeed != 0">
					距结束 <text>{{detail.f_time  || '--'}}</text>
				</view>
				<view class="alb-time" v-if=" detail.f_time == 0">
					距结束 <text>{{detail.f_time  || '--'}}</text>
				</view>
				<view class="alb-time" v-if="detail.kjNeed == 0">
					砍价成功
				</view>
			</view>
		</view>
		<view class="area-2">
			<!-- <button class="sharebutton" type="default" open-type="share">
				<view class="ftb-l-item">
					<image src="/pagesShop/static/fb3.png" mode=""></image>
					<text>分享</text>
				</view>
			</button> -->
			<button plain type="default" open-type="share"  v-if="detail.status == 8 && isornot">邀请好友帮忙砍价</button>
			<button plain  v-if="detail.status == 9  && isornot" @click="pageJumps('/pagesShop/list/shopOrderList2')">砍价成功,去支付!</button>
			<button plain @click="openP1" v-if="!isornot && detail.kjNeed != 0">帮好友砍价</button>
		</view>
		<view class="area-3" v-if="detail.kjAdd!=''">
			<view class="a3-title">
				<image src="/pagesShop/static/t2.png" mode="widthFix"></image>
				<text>砍价榜</text>
				<image src="/pagesShop/static/t1.png" mode="widthFix"></image>
			</view>
			<!-- 砍价榜 -->
			<view class="a3-content">
				<view class="a3-row" v-for="(item,index) in detail.kjAdd" :key='index'>
					<view class="a3-row-l">
						<image :src="/^[http | https]/.test(item.customerAvatar) ? item.customerAvatar  : `${shopImgUrl}${item.customerAvatar}`" mode="aspectFill"></image>
						<text>{{item.customerName}}</text>
					</view>
					<view class="a3-row-r">
						砍掉<text>{{item.subMoney}}</text>元
					</view>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="p1">
			<view class="popup-content">
				<image class="pc-bg" src="/pagesShop/static/yq.png" mode="widthFix"></image>
				<image @click="closeP1" class="pc-close" src="/pagesShop/static/k1.png" mode=""></image>
				<view class="pc-bt1" @click="bmkj" v-if="!isornot">
					<image src="/pagesShop/static/bt1.png" mode="widthFix"></image>
					<text>立即帮好友砍价</text>
				</view>
				<view class="pc-text" v-else>
					<text>帮好友砍价</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				cid:'',//商品id
				orderid:'',//订单id
				page_height: uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 44,
				detail:{},//详情
				isornot: true ,//自己或不是自己
			}
		},
		onLoad(opt) {
			console.log(opt)
			// this.cid = opt.cid
			this.orderid = opt.orderid
			const scene = opt.scene
			 if (scene) {
				this.$store.commit('upInviteCode', scene)
			}
			if (opt.inviteCode && opt.inviteCode != this.getCustomerInfo.inviteCode) {
				this.isornot = false
				this.$store.commit('upInviteCode', opt.inviteCode)
			} 
		},	
		onShow() {
			this.getdetail()
		},
		onPullDownRefresh() {
			this.getdetail()
		},
		onShareAppMessage(res) {
			return {
				title: "帮我砍价" + this.detail.productName,
				path: '/pagesShop/details/kj?inviteCode=' + this.getCustomerInfo.inviteCode + '&orderid=' + this.orderid,
				imageUrl: '',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods:{
			formatTime() {
			this.timer = setInterval(() => {
			//list是数据的列表,每一项的结束时间
				//每一项的kjFinishTime,也就是结束时间
					const time = this.computeTime(this.detail.kjFinishTime)
			//调用computeTime传入item.kjFinishTime.给list的每一项添加f_time,也就是倒计时,现在可以在循环列表中使用item.f_time了
					this.$set(this.detail,'f_time',time)
			},1000)
			},
			// 计算列表倒计时
			computeTime(finishTime) {
				finishTime = finishTime.replace(/-/g,"/")
			if(typeof finishTime === 'string' && new Date(finishTime).toString() !== 'Invalid Date') {
				const now_time = new Date().getTime()
				const finish_time = new Date(finishTime).getTime()
				const sy_time = finish_time-now_time
				if(sy_time > 0) {
					 // 时
					const hour = Math.floor( sy_time / (1000*60*60) ).toString().padStart(2,'0')
					const sy_time1 = Math.floor( sy_time % (1000*60*60) )
					// 分
					const min = Math.floor( sy_time1 / (1000*60) ).toString().padStart(2,'0')
					const sy_time2 = Math.floor( sy_time1 % (1000*60) )
					// 秒
					const sec = Math.floor( sy_time2 / (1000) ).toString().padStart(2,'0')
					// 剩余时间
					const time_str = `${hour}:${min}:${sec}`
					return time_str
				} else {
					return '活动已结束'
				}
			} else {
				return '无效的结束时间'
			}
			},
			// 根据订单id查询订单详情数据
			getdetail(){
				this.$http.post(this.$api.getKjList + '?id=' + this.orderid).then(res => {
					uni.stopPullDownRefresh()
					if(res.code == 200){
						if (!res.data.customerAvatar.startsWith('http')) {
							res.data.customerAvatar = this.$imgUrl + res.data.customerAvatar
						}
						this.detail = res.data
						this.formatTime()
						if(res.data.kjStatus == 1 && !this.isornot){
							this.openP1()
						}
					}
				})
			},
			//帮忙砍价
			bmkj(){
				this.$http.post(this.$api.helpBargain + '?id=' + this.orderid).then(res => {
					if(res.code == 200){
						this.getdetail()
						this.closeP1()
						uni.showToast({
							title: '砍价成功',
							icon: 'none'
						})
					}else{
						this.closeP1()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						
					}
				})
			},
			//好友点击的弹窗
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zg-area {
		padding: 30rpx;
	}
	
	.area-1 {
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}
	
	.a1t {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		margin-bottom: 30rpx;
		
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	
	
	.a1m {
		display: flex;
		margin-bottom: 50rpx;
	}
	
	.a1m-l {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	
	.alm-r {}
	
	.almr-t {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.almr-m {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.almr-b {
		color: #FF4A37;
		
		text {
			&:nth-of-type(1) {
				font-size: 32rpx !important;
				font-weight: bold;
			}
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}
	
	.alb-process {
		position: relative;
	}
	
	.albp-price {
		margin-bottom: 10rpx;
		
		text {
			color: #FF4A37;
		}
	}
	
	.albp-tag {
		position: absolute;
		right: 0;
		bottom: 24px;
		width: 180rpx;
		
		image {
			width: 100%;
			height: auto;
		}
	}
	
	.albp-tag-content {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		text-align: center;
		color: #666;
		padding: 5rpx 10rpx;
		transform: scale(0.9);
		text {
			font-size: 28rpx;
			color: #FF4A37;
		}
	}
	
	.alb-time {
		font-weight: bold;
		padding-top: 30rpx;
		text-align: center;
		font-size: 28rpx;
		
		text {
			// background-color: #000;
			color: #FF4A37;
			padding: 0 4rpx;
			margin: 0 10rpx;
		}
	}
	
	.area-2 {
		margin: 80rpx 0 30rpx;
		
		button {
			background-color: #FF4A37;
			color: #fff;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 60rpx;
			font-size: 30rpx;
		}
	}
	
	.area-3 {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.a3-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		
		image {
			width: 160rpx;
			height: auto;
		}
		
		text {
			font-size: 32rpx;
			color: #FF4A37;
			padding: 0 10rpx;
		}
	}
	
	.a3-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}
	
	.a3-row-l {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	
	.a3-row-r {
		font-size: 26rpx;
		text {
			color: $uni-color-warning;
		}
	}
	
	.popup-content {
		width: 600rpx;
		position: relative;
	}
	
	.pc-bg {
		width: 100%;
		height: auto;
	}
	
	.pc-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
	.pc-bt1 {
		position: absolute;
		right: 100rpx;
		bottom: 80rpx;
		width: 400rpx;
		
		text {
			position: absolute;
			left: 0;
			top: 20rpx;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
		}
	}
	
	.pc-text {
		position: absolute;
		right: 0rpx;
		top: 80rpx;
		width: 600rpx;
		text-align: center;
		font-size: 50rpx;
		color: #fff;
	}
</style>
